<template>
  <div class="ui-page">
    <view class="ui-demo-block">
      <view class="demo-block--title" inline>基础</view>
      <uiBtn inline>默认按钮</uiBtn>
      <uiBtn type="primary" inline>主要按钮(品牌色)</uiBtn>
      <uiBtn type="info" inline>信息按钮</uiBtn>
      <uiBtn type="danger" inline>危险按钮</uiBtn>
      <uiBtn type="warning" inline>警告按钮</uiBtn>
    </view>

    <!-- 按钮的大小 -->
    <view class="ui-demo-block">
      <view class="demo-block--title" inline>按钮的大小</view>
      <uiBtn type="primary" inline>默认大小</uiBtn>
      <uiBtn type="primary" size="large" inline>large</uiBtn>
      <uiBtn type="primary" size="small" inline>small</uiBtn>
      <uiBtn type="primary" size="mini" inline>mini</uiBtn>
    </view>

    <!-- 朴素按钮 -->
    <view class="ui-demo-block">
      <view class="demo-block--title" inline>朴素按钮</view>
      <uiBtn inline plain>默认按钮</uiBtn>
      <uiBtn type="primary" inline plain>主要按钮(品牌色)</uiBtn>
      <uiBtn type="info" inline plain>信息按钮</uiBtn>
      <uiBtn type="danger" inline plain>危险按钮</uiBtn>
      <uiBtn type="warning" inline plain>警告按钮</uiBtn>
    </view>

    <!-- text按钮 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">text按钮</view>
      <uiBtn text>默认按钮</uiBtn>
      <uiBtn type="primary" size="large" text>主要按钮(品牌色)</uiBtn>
      <uiBtn type="info" size="small" text>信息按钮</uiBtn>
      <uiBtn type="danger" size="mini" text>危险按钮</uiBtn>
      <uiBtn type="warning" size="mini" text>警告按钮</uiBtn>
    </view>

    <!-- 禁用状态 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">禁用状态</view>
      <uiBtn inline disabled>默认按钮</uiBtn>
      <uiBtn type="primary" size="large" inline disabled>主要按钮(品牌色)</uiBtn>
      <uiBtn type="info" size="small" inline disabled>信息按钮</uiBtn>
      <uiBtn type="danger" size="mini" inline disabled>危险按钮</uiBtn>
      <uiBtn type="warning" size="mini" inline disabled>警告按钮</uiBtn>

      <uiBtn type="primary" size="large" plain inline disabled>主要按钮(品牌色)</uiBtn>
      <uiBtn type="primary" size="large" text inline disabled>主要按钮(品牌色)</uiBtn>
    </view>

    <!-- 加载状态 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">加载状态</view>
      <uiBtn inline loading loadingText="加载中.....">默认按钮</uiBtn>
      <uiBtn type="primary" size="large" inline loading loadingType="spinner">加载中..</uiBtn>
      <uiBtn type="info" size="small" inline loading loadingType="spinner">加载中..</uiBtn>
      <uiBtn type="danger" size="mini" inline loading loadingType="spinner">加载中..</uiBtn>
      <uiBtn type="warning" size="mini" inline loading loadingType="spinner">加载中..</uiBtn>
    </view>

    <!-- 按钮形状 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">按钮形状</view>
      <uiBtn inline>默认按钮</uiBtn>
      <uiBtn inline square>圆角</uiBtn>
      <uiBtn inline circle icon="ui-icon-music-o"></uiBtn>
    </view>

    <!-- 页面导航 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">页面导航</view>
      <uiBtn type="info" inline url="/pages/demo/index">URL跳转</uiBtn>
      <uiBtn type="info" inline url="/pages/demo/index" replace>replace</uiBtn>
    </view>

    <!-- 开发能力 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">开发能力</view>
      <uiBtn type="primary" open-type="getUserInfo">getuserinfo</uiBtn>
      <uiBtn type="primary" open-type="getPhoneNumber">获取用户的手机号</uiBtn>
      <uiBtn type="primary" open-type="share">分享</uiBtn>
    </view>

    <!-- 按钮组 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">按钮组</view>
      <uiBtnGroup square>
        <uiBtn square>disabled</uiBtn>
        <uiBtn type="primary">disabled</uiBtn>
      </uiBtnGroup>
    </view>
  </div>
</template>

<script>
import uiBtnGroup from "components/base/button-group/index";
import uiBtn from "components/base/button/index";
export default {
  name: "name",
  components: {
    uiBtnGroup,
    uiBtn
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss" >
/deep/ .ui-btn.is-inline {
  margin-bottom: 20upx;
}
/deep/ .ui-btn.is-inline + .ui-btn.is-inline {
  margin-left: 20upx;
}
</style>
